<template>
  <div class="info">
    <div class="item-wrapper">
      <div class="item">
        总数：
        <strong>{{totalNum}}</strong>
      </div>
      <div class="item">
        总价:
        <strong>{{totalPrice}}</strong>
      </div>
      <div @click="clearAllCart" class="item btn btn-danger">清空购物车</div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'info',
  data () {
    return {}
  },
  computed: {
    // 通过辅助函数mapGetters将totalPrice, totalNum与vuex中getters的totalPrice,totalNum对应上
    ...mapGetters(['totalPrice', 'totalNum'])
  },
  methods: {
    // 通过mapActions辅助函数将事件函数clearAllCart与vuex中action的clearAllCart对应上
    ...mapActions(['clearAllCart'])
  }
}
</script>
<style scoped>
  .item-wrapper{
    display: flex;
    background-color: #dfdfdf;
    align-items: center;
    justify-content: center;
  }
  .item{
    flex: 1;
  }
</style>
